<!DOCTYPE html>
<html lang="ch">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <link rel="icon" href="images/huihui.png" type="image/x-icon">

  <!--    引入vue-->
  <script src="js/vue.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="css/index.css">
  <!-- 引入组件库 -->
  <script src="js/index.js"></script>
  <!--    引入axios-->
  <script src="js/axios.min.js"></script>
  <!--    表格颜色颜色样式-->
  <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>
  <title>内部查询页面</title>
</head>

<body>
  <div id="app">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">报名人员</el-menu-item>
      <el-menu-item index="2" disabled>比赛排名</el-menu-item>

      <el-menu-item index="3" disabled>消息中心</el-menu-item>
    </el-menu>
    <div class="line"></div>

    <br>
    <!--        搜索表单-->
    <el-form :inline="true" :model="find" class="demo-form-inline" size="small">
      <el-form-item label="筛选">
        <el-select v-model="find.key" placeholder="条件">
          <el-option label="选题" value="topic"></el-option>
          <el-option label="队伍名称" value="teamName"></el-option>
          <!-- <el-option label="电话" value="phone"></el-option> -->
          <el-option label="队长姓名" value="leaderName"></el-option>
          <el-option label="队长学号" value="leaderNumber"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-input placeholder="可关键字搜索" v-model="find.val" id="search"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">查询</el-button>
      </el-form-item>
    </el-form>

    <!--        表格-->
    <template>
      <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center"> </el-table-column>
        <el-table-column type="index" align="center"> </el-table-column>

        <el-table-column prop="teamName" align="center" label="队伍名称">
        </el-table-column>
        <el-table-column prop="topic" align="center" label="选题">
        </el-table-column>
        <el-table-column prop="leaderName" align="center" label="队长姓名">
        </el-table-column>
        <el-table-column prop="leaderNumber" align="center" label="队长学号">
        </el-table-column>
        <el-table-column prop="leaderPhone" align="center" label="队长电话">
        </el-table-column>
        <el-table-column prop="leaderMajor" align="center" label="队长专业">
        </el-table-column>
        <el-table-column prop="firstMemName" align="center" label="队员1姓名">
        </el-table-column>
        <el-table-column prop="firstMemNum" align="center" label="队员1学号">
        </el-table-column>
        <el-table-column prop="secMemName" align="center" label="队员2姓名">
        </el-table-column>
        <el-table-column prop="secMemNum" align="center" label="队员2学号">
        </el-table-column>



      </el-table>
    </template>



    <script>
      new Vue({
        el: "#app",
        mounted() {
          this.getAll();
        },
        data() {
          return {
            //表格的数据
            tableData: [],
            //复选框选中数据集合
            multipleSelection: [],
            //条件搜索表单
            find: {
              key: "",
              val: ""
            },
            //数据框表单隐藏选项
            dialogVisible: false,
            //分页
            currentPage: 1,
            activeIndex: '1',
            activeIndex2: '1'
          };
        },
        created() {
          //钩子函数
        },
        methods: {
          //获取表单数据
          getAll() {
            axios.get("/all").then((res) => {
              this.tableData = res.data.data;
              console.log(res.data);
            });
          },
          //导航栏
          handleSelect(key, keyPath) {
            console.log(key, keyPath);
          },
          //表格中的复选框颜色设置
          tableRowClassName({ row, rowIndex }) {
            // if (rowIndex%2 === 1) {
            //   return "success-row";
            // }
            return "";
          },
          //复选框选中后执行的方法
          handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(this.multipleSelection);
          },
          //搜索条件表单,调用查询方法
          onSubmit() {
            var a = true;
            var b = document.getElementById('search').value;
            if (this.find.key == "topic") {

              // this.find.stuname = null;
              // this.find.number = null;
              // this.find.secDept = -1;
              if ((b != "A题") && (b != "B题") && (b != "C题") && (b != "D题") && (b != "E题") && (b != "F题")) {
                alert("查询格式为：\nA题\nB题\nC题\nD题\nE题\nF题"); a = false;
              }
            }
            else if (this.find.key == "teamName") {

            }
            else if (this.find.key == "leaderName") {

            }
            else if (this.find.key == "leaderNumber") {

            }
            else {
              getAll();
              a = false;
            }

            //发送请求数据
            if (a) {
              axios.get("/keys?key=" + this.find.key + "&val=" + this.find.val).then((res) => {
                this.tableData = res.data.data;
                console.log(res.data);
              });
            }
          },

          //分页工具
          handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
          },
          //当前页显示
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
          },

          // genderFormatter: function (row) {
          //   switch (row.gender) {
          //     case 0:
          //       return "无限制";
          //     case 1:
          //       return "男";
          //     case 2:
          //       return "女";
          //   }
          // }


        }
      });
    </script>
</body>

</html>